<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
    <h1>首页</h1><br/>
    <form th:action="@{/testRequestBody}" method="post">
        <input type="text" name="username"><br/>
        <input type="text" name="password"><br/>
        <input type="submit" value="测试 @RequestBody ">
    </form><br/>
    <form th:action="@{/testRequestEntity}" method="post">
        <input type="text" name="username"><br/>
        <input type="text" name="password"><br/>
        <input type="submit" value="测试 RequestEntity ">
    </form>
    <a th:href="@{/testResponseBody}">通过 ResponseBody 响应浏览器数据 </a><br/>
    <a th:href="@{/testResponseUser}">通过 ResponseBody 响应浏览器 User 数据 </a><br/>
    <div id="app">
        <a th:href="@{/testAjax}" @click="testAjax">testAjax</a>
    </div>

    <script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script type="text/javascript">
        var vue = new Vue({
            el:"#app",
            methods:{
                testAjax:function (event) {
                    axios({
                        method:"post",
                        url:event.target.href,
                        params:{
                            username:"admin",
                            password:"123456"
                        }
                    }).then(function (response) {
                        alert(response.data);
                    });
                    event.preventDefault();
                }
            }
        });
    </script>

</body>
</html>